<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Asiapp - Shop & Medical Mobile Template </title> 
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="HandheldFriendly" content="True">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- CSS  -->
<link rel="stylesheet" href="lib/font-awesome/web-fonts-with-css/css/fontawesome-all.css">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<!-- materialize icon -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Owl carousel -->
<link rel="stylesheet" href="lib/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="lib/owlcarousel/assets/owl.theme.default.min.css">
<!-- Slick CSS -->
<link rel="stylesheet" type="text/css" href="lib/slick/slick/slick.css">
<link rel="stylesheet" type="text/css" href="lib/slick/slick/slick-theme.css">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="lib/Magnific-Popup-master/dist/magnific-popup.css">
</head>
<body id="homepage">
<!-- BEGIN PRELOADING -->
<div class="preloading">
  <div class="wrap-preload">
    <div class="cssload-loader"></div>
  </div>
</div>
<!-- END PRELOADING -->
<!-- HEADER -->
<header id="header" class="header-innerpage ">
<div class="nav-wrapper container">


   <div class="header-menu-button">
    <a href="#" data-activates="nav-mobile-category" class="button-collapse" id="button-collapse-category">
    <div class="cst-btn-menu">
      <i class="fas fa-align-left"></i>
    </div>
    </a>
  </div>
  <div class="header-logo">
    <a href="#" class="nav-logo">Asiapp</a>
  </div>
     <div class="header-icon-menu">
    <a href="#" data-activates="nav-mobile-account" class="button-collapse" id="button-collapse-account"><i class="fas fa-search"></i></a>
  </div>
 
 
  
</div>
</header>
<!-- END HEADER -->
<!-- SIDE NAV-->
<nav>

<!-- LEFT SIDENAV-->
<ul id="nav-mobile-category" class="side-nav">
  <li class="profile">
    <div class="li-profile-info">
      <img src="img/profile4.jpg" alt="profile">
      <h2>John Doe</h2>
      <div class="emailprofile">email@email.com</div>
      <div class="balance">
         Balance : <span>$600</span>
      </div>
    </div>
    <div class="bg-profile-li">
      <img alt="photo" src="img/bg-profile.jpg">
    </div>
  </li>
  <li>
    <a class="waves-effect waves-blue" href="index.html"><i class="fas fa-home"></i>Home</a>
  </li>
  <li>
    <a href="our-doctors.html"><i class="fas fa-user-md"></i>Our Doctors</a>
  </li>
     <li>
    <ul class="collapsible collapsible-accordion">
      <li>
        <div class="collapsible-header"> 
          <i class="fas fa-shopping-bag"></i>Shop<span><i class="fas fa-caret-down"></i></span>
        </div>
        <div class="collapsible-body">
          <ul>
             <li>
              <a class="waves-effect waves-blue" href="product-list.html"><i class="fas fa-angle-right"></i>Product List</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="wish-list.html"><i class="fas fa-angle-right"></i>Wish List</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="product-page.html"><i class="fas fa-angle-right"></i>Product Page</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="shopping-cart.html"><i class="fas fa-angle-right"></i>Shopping Cart</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="checkout.html"><i class="fas fa-angle-right"></i>Checkout</a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </li>
  
  <li>
    <ul class="collapsible collapsible-accordion">
      <li>
        <div class="collapsible-header">
          <i class="far fa-newspaper"></i>News Blog<span><i class="fas fa-caret-down"></i></span>
        </div>
        <div class="collapsible-body">
          <ul>
            <li>
              <a class="waves-effect waves-blue" href="news-list.html"><i class="fas fa-angle-right"></i>News List</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="news-page.html"><i class="fas fa-angle-right"></i>News Page</a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </li>
  <li>
    <a href="gallery.html"><i class="fas fa-camera-retro"></i>Gallery</a>
  </li>
  <li>
    <ul class="collapsible collapsible-accordion">
      <li>
        <div class="collapsible-header">
          <i class="fas fa-columns"></i>Pages <span><i class="fas fa-caret-down"></i></span>
        </div>
        <div class="collapsible-body">
          <ul>
            <li>
              <a class="waves-effect waves-blue" href="index.html"><i class="fas fa-angle-right"></i>Home</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="setting.html"><i class="fas fa-angle-right"></i>Setting</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="404.html"><i class="fas fa-angle-right"></i>404</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="login.html"><i class="fas fa-angle-right"></i>Sign In</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="signup.html"><i class="fas fa-angle-right"></i>Sign Up</a>
            </li> 
            <li>
              <a class="waves-effect waves-blue" href="single-page.html"><i class="fas fa-angle-right"></i>Single page</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="news-list.html"><i class="fas fa-angle-right"></i>News List</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="news-page.html"><i class="fas fa-angle-right"></i>News Page</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="gallery.html"><i class="fas fa-angle-right"></i>Gallery</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="product-list.html"><i class="fas fa-angle-right"></i>Product List</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="wish-list.html"><i class="fas fa-angle-right"></i>Wish List</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="product-page.html"><i class="fas fa-angle-right"></i>Product Page</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="shopping-cart.html"><i class="fas fa-angle-right"></i>Shopping Cart</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="checkout.html"><i class="fas fa-angle-right"></i>Checkout</a>
            </li>
            <li>
              <a class="waves-effect waves-blue" href="contact.html"><i class="fas fa-angle-right"></i>Contact Us</a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </li>
  <li>
    <a href="setting.html"><i class="fas fa-cog"></i>Setting</a>
  </li> 
  <li>
    <a href="contact.html"><i class="fas fa-envelope"></i>Contact Us</a>
  </li>
  <li>
    <a href="#"><i class="fas fa-sign-out-alt"></i>Sign Out</a>
  </li>
</ul>
<!-- END LEFT SIDENAV-->
<!-- RIGHT SIDENAV-->
<ul id="nav-mobile-account" class="side-nav">
  <li class="sidenav-logo">
     Search
  </li>
  <li>
    <div class="search-wrapper ">
      <input id="search"><i class="material-icons">search</i>
      <div class="search-results"></div>
    </div>
  </li>
  <li>
    <ul class="sidenav-search-result">
      <li class="search-result-head"><a href="#">Search result</a></li>
      <li><a href="#">Info - Healt Care Solution</a></li> 
      <li><a href="#">info - 5 ways to winterproof your skin </a></li> 
      <li><a href="#">info - 4 healthy snacks to keep you full </a></li> 
     
    </ul>
  </li>
  <li>
      <ul class="sidenav-search-result">
        <li class="search-result-head"><a href="#">Populer tag</a></li>
       <li>
    <div class="section populer-search">
            <div class="list-tag-word">
             <a class="tag-word">Doctor</a>
              <a class="tag-word">Medicine</a>
              <a class="tag-word">Hospital</a>
              <a class="tag-word">health</a>
              <a class="tag-word">drink</a>
              <a class="tag-word">sport</a>
              <a class="tag-word">Checkup</a>
            </div> 
    </div>
  </li>
     
    </ul>
  </li>
 
   
</ul>
<!-- END RIGHT SIDENAV-->

</nav>
<!-- END SIDENAV-->



<!-- CONTENT -->
<div id="page-content">
  <div class="section product-item">
    <div class="container">
      <div class="row row-title">
        <div class="col s12">
          <div class="section-title">
            <span class="theme-secondary-color">OUR</span> PRODUCTS
          </div>
        </div>
      </div>
      <div class="row row-no-margin">
        <!-- Product item-->
        <div>
          <div class="col s6 m4 l3 col-produc">
            <div class="box-product">
                <div class="bp-top">
                  <div class="product-list-img">
                    <div class="pli-one">
                      <div class="pli-two">
                        <img src="img/product.jpg" alt="img">
                      </div>
                    </div>
                  </div>
                  <h5><a href="">Herbal Drinks</a></h5>
                  <div class="item-info">healthy drinks</div>
                  <div class="price">
                     $5 <span>/600 ml</span>
                  </div>
                  <div class="stock-item">Only available 4 items</div>
                </div>
                <div class="bp-bottom">
                  <button class="btn button-add-cart">BUY</button>
                </div>
              </div>
          </div>
        </div>
        <!-- End Product item-->
        <!-- Product item-->
        <div>
          <div class="col s6 m4 l3 col-produc">
            <div class="box-product">
                <div class="bp-top">
                  <div class="product-list-img">
                    <div class="pli-one">
                      <div class="pli-two">
                        <img src="img/product2.jpg" alt="img">
                      </div>
                    </div>
                  </div>
                  <h5><a href="">Vitamin</a></h5>
                  <div class="item-info">1pack 20pcs</div>
                  <div class="price">
                     $8  
                  </div>
                  <div class="stock-item">Only available 10 packs</div>
                </div>
                <div class="bp-bottom">
                  <button class="btn button-add-cart">BUY</button>
                </div>
              </div>
          </div>
        </div>
        <!-- End Product item-->
        <!-- Product item-->
        <div>
          <div class="col s6 m4 l3 col-produc">
            <div class="box-product">
                <div class="bp-top">
                  <div class="product-list-img">
                    <div class="pli-one">
                      <div class="pli-two">
                        <img src="img/product3.jpg" alt="img">
                      </div>
                    </div>
                  </div>
                  <h5><a href="">Suplemen</a></h5>
                  <div class="item-info">Lorem ipsum dolor sit amet</div>
                  <div class="price">$5</div>
                  <div class="stock-item">Ready stock</div>
                </div>
                <div class="bp-bottom">
                  <button class="btn button-add-cart">BUY</button>
                </div>
              </div>
          </div>
        </div>
        <!-- End Product item-->
        <!-- Product item-->
        <div>
          <div class="col s6 m4 l3 col-produc">
            <div class="box-product">
                <div class="bp-top">
                  <div class="product-list-img">
                    <div class="pli-one">
                      <div class="pli-two">
                        <img src="img/product4.jpg" alt="img">
                      </div>
                    </div>
                  </div>
                  <h5><a href="">Tablet</a></h5>
                  <div class="item-info">1pack - 25 pcs</div>
                  <div class="price">
                     $7 <span>/pack</span>
                  </div>
                  <div class="stock-item">Available</div>
                </div>
                <div class="bp-bottom">
                  <button class="btn button-add-cart">BUY</button>
                </div>
              </div>
          </div>
        </div>
        <!-- End Product item-->
        <!-- Product item-->
        <div>
          <div class="col s6 m4 l3 col-produc">
            <div class="box-product">
                <div class="bp-top">
                  <div class="product-list-img">
                    <div class="pli-one">
                      <div class="pli-two">
                        <img src="img/product5.jpg" alt="img">
                      </div>
                    </div>
                  </div>
                  <h5><a href="">Tablet</a></h5>
                  <div class="item-info">1pack - 20 pcs</div>
                  <div class="price">
                     $10 <span></span>
                  </div>
                  <div class="stock-item">Available</div>
                </div>
                <div class="bp-bottom">
                  <button class="btn button-add-cart">BUY</button>
                </div>
              </div>
          </div>
        </div>
        <!-- End Product item-->
        <!-- Product item-->
        <div>
          <div class="col s6 m4 l3 col-produc">
            <div class="box-product">
                <div class="bp-top">
                  <div class="product-list-img">
                    <div class="pli-one">
                      <div class="pli-two">
                        <img src="img/product6.jpg" alt="img">
                      </div>
                    </div>
                  </div>
                  <h5><a href="">pill</a></h5>
                  <div class="item-info">lorem ipsum dolor</div>
                  <div class="price">
                     $10 <span></span>
                  </div>
                  <div class="stock-item">Available</div>
                </div>
                <div class="bp-bottom">
                  <button class="btn button-add-cart">BUY</button>
                </div>
              </div>
          </div>
        </div>
        <!-- End Product item-->
        <!-- Product item-->
        <div>
          <div class="col s6 m4 l3 col-produc">
            <div class="box-product">
                <div class="bp-top">
                  <div class="product-list-img">
                    <div class="pli-one">
                      <div class="pli-two">
                        <img src="img/product7.jpg" alt="img">
                      </div>
                    </div>
                  </div>
                  <h5><a href="">Energy Drink</a></h5>
                  <div class="item-info">lorem ipsum dolor</div>
                  <div class="price">
                     $12 <span>/700ml</span>
                  </div>
                  <div class="stock-item">Available</div>
                </div>
                <div class="bp-bottom">
                  <button class="btn button-add-cart">BUY</button>
                </div>
              </div>
          </div>
        </div>
        <!-- End Product item-->
        <!-- Product item -->
        <div>
          <div class="col s6 m4 l3 col-produc">
            <div class="box-product">
                <div class="bp-top">
                  <div class="product-list-img">
                    <div class="pli-one">
                      <div class="pli-two">
                        <img src="img/product8.jpg" alt="img">
                      </div>
                    </div>
                  </div>
                  <h5><a href="">Toothpaste</a></h5>
                  <div class="item-info">lorem ipsum dolor</div>
                  <div class="price">
                     $10 
                  </div>
                  <div class="stock-item">Pre Order</div>
                </div>
                <div class="bp-bottom">
                  <button class="btn button-add-cart">BUY</button>
                </div>
              </div>
          </div>
        </div>
        <!-- End Product item-->
        
        </div>
    </div>
  </div>
  <!-- PAGINATION -->
  <div class="container">
    <div class="row">
      <div class="col s12">
        <ul class="pagination">
          <li class="disabled">
            <a href="#!"><i class="material-icons">chevron_left</i></a>
          </li>
          <li class="active">
            <a href="#!">1</a>
          </li>
          <li class="waves-effect">
            <a href="#!">2</a>
          </li>
          <li class="waves-effect">
            <a href="#!">3</a>
          </li>
          <li class="waves-effect">
            <a href="#!">4</a>
          </li>
          <li class="waves-effect">
            <a href="#!">5</a>
          </li>
          <li class="waves-effect">
            <a href="#!"><i class="material-icons">chevron_right</i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- END PAGINATION -->


 
 
<!-- SUBSCRIBE -->
<div class="section subscribe">
  <div class="container">
    <div class="row">
      <div class="col s12">
        <div class="section-title">SUBSCRIBE</div>
        <p class="center">Get healthy news and solutions every day</p>
        <div class="mail-subscribe-box">
          <input class="form-control" name="user-email" placeholder="Enter email address" value="" type="email">
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-subscribe">
    <img src="img/bg-profile.jpg">
  </div>
</div>
<!-- END SUBSCRIBE -->
<!-- FOOTER  -->
<footer id="footer">
<div class="container">
  <div class="row row-footer-icon">
    <div class="col s12">
      <div class="footer-sosmed-icon ">
        <div class="wrap-circle-sosmed ">
          <a href="#">
          <div class="circle-sosmed">
            <i class="fab fa-instagram"></i>
          </div>
          </a>
        </div>
        <div class="wrap-circle-sosmed ">
          <a href="#">
          <div class="circle-sosmed">
            <i class="fab fa-linkedin-in"></i>
          </div>
          </a>
        </div>
        <div class="wrap-circle-sosmed ">
          <a href="#">
          <div class="circle-sosmed">
            <i class="fab fa-twitter"></i>
          </div>
          </a>
        </div>
        <div class="wrap-circle-sosmed ">
          <a href="#">
          <div class="circle-sosmed">
            <i class="fab fa-facebook-f"></i>
          </div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="row copyright">
     2019 <span>Asiapp</span>, All rights reserved.
  </div>
</div>
</footer>
<!-- END FOOTER -->
<!-- Script -->
<script src="js/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
<!-- Owl carousel -->
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="lib/Magnific-Popup-master/dist/jquery.magnific-popup.js"></script>
<!-- Slick JS -->
<script src="lib/slick/slick/slick.min.js"></script>
<!-- Custom script -->
<script src="js/custom.js"></script>
</body>
</html>